import React, { memo, useEffect } from 'react'
import { ArtistCategoryWrapper ,ItemWrapper,LiWrapper,UlWrapper} from './style'
import {artistCategories} from '@/services/local-data'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import {
  getArtistListAction,
  getCurrentTitleAction,
  getCurrentAreaAction,
  getCurrentTypeAction
} from '../../store/actionCreators'
export default memo(function ArtistCategory() {
  const { currentArea, currentType,currentTitle ,currentInitial} = useSelector(state => ({
    currentArea: state.getIn(['artist', 'currentArea']),
    currentType: state.getIn(['artist', 'currentType']),
    currentTitle: state.getIn(['artist', 'currentTitle']),
    currentInitial:state.getIn(['artist','currentInitial'])
  }),shallowEqual)
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getArtistListAction(currentType,currentArea,currentInitial))
  }, [dispatch, currentType, currentArea,currentInitial])
  const chooseCate = (name,area,type) => {
    dispatch(getCurrentTitleAction(name))
    dispatch(getCurrentTypeAction(type))
    dispatch(getCurrentAreaAction(area))
  }
  return (
    <ArtistCategoryWrapper>
      {
        artistCategories.map(item => { 
          return (
            <ItemWrapper key={item.title}>
              <h2 className='title'>{item.title}</h2>
              {
                <UlWrapper>
                  {
                    item.artists.map(item2 => {
                      return (
                        <LiWrapper key={item2.name} isActive={item2.name === currentTitle}>
                          <span className='singer_sprite icon' onClick={e => chooseCate(item2.name,item.area,item2.type)}>{item2.name}</span>
                        </LiWrapper>
                      )
                    })
                  }
                </UlWrapper>
              }
            </ItemWrapper>
          )
        })
      }
    </ArtistCategoryWrapper>
  )
})
